<template>
  <div>
    <h1>Music</h1>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Music",
  mounted() {
    console.log(this.$route.params);
  },
  // params 3.动态路由的params传值的动态参数,在$route.params对象上
  computed: {
    list() {
      console.log(this.$route.params);
      switch (this.$route.params.id) {
        case "1":
          return ["huayu1", "huayu2", "huayu3"];
        case "2":
          return ["yueyu1", "yueyu2", "yueyu3"];
        case "3":
          return ["yingyu1", "yingyu2", "yingyu3"];
        default:
          return [];
      }
    },
  },
};
</script>

<style>
</style>